<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            box-sizing: border-box;
            padding: 0px;
            margin: 0px;
        }
        .banner{
            position: absolute;
            top: 0px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            margin: auto auto;
            display: flex;
            flex-direction: column;
            width: 604px;
            height: 342px;
            overflow: hidden;
        }
        .banner>.imgList{
            height: 298px;
            width:604px;
            position: relative;
            /*transform: translateX(-604px);*/

        }
        .banner>.imgList>img{
            position: absolute;
            left:100%;
        }
        .banner>.imgList>img:first-child{
            left:0;
            transition:left 400ms linear
        }
        .banner>.tabControl{
            flex: 1;
            display: flex;
            background-color: black;
        }
        .banner>.tabControl>.item{
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            color:#B1B2BE ;
        }
        .banner>.tabControl>.item>a{

            text-decoration: none;

        }
        .banner>.tabControl>.active{
            cursor: pointer;
            color: #F3C258;
            background-color: #FFFFFF26;
        }


    </style>
</head>
<body>
<div class="banner">
    <div class="imgList">
        <img src="./img/banner_05.jpeg" alt=""><img src="./img/banner_04.jpeg" alt=""><img src="./img/banner_03.jpeg" alt=""><img src="./img/banner_02.jpeg" alt=""><img src="./img/banner_01.jpeg" alt="">
    </div>
    <div class="tabControl">
        <div class="item active">场景票选结果</div>
        <div class="item">高校联赛总决赛</div>
        <div class="item">大招已经好了</div>
        <div class="item">女子公开赛</div>
        <div class="item">王者萌萌假日</div>
    </div>
</div>
<script>
    const tabControlEl = document.querySelector('.tabControl')
    const imgListEl = document.querySelector('.imgList')
    const imgItemsEl = imgListEl.querySelectorAll('img')
    let activeEl = document.querySelector('.active')
    const itemEls = document.querySelectorAll('.item')
    let imgIndex = 0;
    /*记录前一个图片的index*/
    let previousIndex =0;
    tabControlEl.addEventListener('mouseover',(event)=>{
        if(event.target.classList.contains('item')){
            /*取消定时器*/
            clearInterval(timer)
            /*拿到当前hover的tab的数组中的位置*/
            let index = Array.from(itemEls).findIndex(item=>item===event.target)
            previousIndex=imgIndex
            imgIndex = index
            /*调用图片轮播函数*/
            switchBanner()
        }
    })
    /*自动图片轮播*/
    let timer = undefined
    const autoBanner = ()=>{
        timer=setInterval(()=>{
            previousIndex=imgIndex
            imgIndex++;

            if(imgIndex>=itemEls.length){
                imgIndex=0
            }
            /*调用图片轮播函数*/
            switchBanner()
        },2000)
    }
    autoBanner()
    /*鼠标离开*/
    tabControlEl.addEventListener('mouseout',(event)=>{
        if(event.target.classList.contains('item')){
            /*拿到当前hover的tab的数组中的位置*/
            let index = Array.from(itemEls).findIndex(item=>item===event.target)
            imgIndex = index
            /*调用自动轮播函数*/
            autoBanner()
        }
    })
    /*封装图片轮播函数*/
    const switchBanner = ()=>{
        for(let i=0;i<imgItemsEl.length;i++){
            if(i===imgIndex){

                imgItemsEl[i].style.transition=`left 400ms linear`
                imgItemsEl[i].style.left=`0`
            }else if(i<imgIndex){
                /*如果比他小的不是他的前一个 就把动画移除*/
                if(i !== previousIndex) imgItemsEl[i].style.transition=`none`
                imgItemsEl[i].style.left=`-100%`
            }else {
                /*如果比他大的不是他的前一个 就把动画移除*/
                if(i !== previousIndex) imgItemsEl[i].style.transition=`none`
                imgItemsEl[i].style.left=`100%`
            }
        }
        /*处理下面tabControl的自动轮播  思路：取消之前的active类 新增active类*/
        activeEl.classList.remove('active')
        tabControlEl.children[imgIndex].classList.add('active')
        /*记录新的activeEl 类*/
        activeEl=tabControlEl.children[imgIndex]
    }
</script>
</body>
</html>